$(document).ready(function () {
   
    list();

});


function list() {
    var id=sessionStorage.getItem("id");
    
    $.ajax({
        type: "GET",
        url: SERVER_PATH + "/data/list",
        data: {
            userId: id
        },
        xhrFields: {withCredentials: true},
        success: function (result) {
            if (result.status) {
                alertBox(result.data.message);
                return false;
            }
            init(result.data);
        }
    });
}

function init(dataLists) {

    
    //实例化echarts
    // 1 创建一个实例
    var echart = echarts.init(document.querySelector(".data-container"));

    //横轴数据
    let datax = dataLists.datax;
    //标注数据
    let data0 = [];

    
    //不需要展示的name
    var noNeed=["datax"];

    //原始数据的所有name
    let keys=Object.keys(dataLists);

    //动态生成下面的数据，不需要修改

    //随机生成相同数量的颜色
    let colors=generateRandomColors(keys.length);
    
   
    //名称和对应的数据
    let names = []
    let datas = [];

    keys.forEach((name) => {
        if(!noNeed.includes(name)){
            names.push(name);
            datas.push(dataLists[name]);
        }
        
    });

    
    for(let i=0;i<names.length;i++){
        data0.push([]);
    }

    datas.forEach((data, index) => {
        data.forEach((item, i) => {
            data0[index].push({
                yAxis: item,  // 标注的Y轴位置
                xAxis: datax[i], // 标注的X轴位置
                value: item  // 标注的value值
            });
        });
    
    });


    let seriesData=[];

    for (var i = 0; i < datas.length; i++) {
        seriesData.push({
            name: names[i],
            type: 'line',
            showAllSymbol: true, //显示所有图形。
            //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            itemStyle: {
                //折线拐点标志的样式
                color: 'white',
                borderWidth: '2',
                borderColor: colors[i],
                normal: {
                    color: colors[i]//拐点颜色
                }
            },
            lineStyle:{
                color: colors[i]
            },
            markPoint: {
                data: data0[i]
            },
            data: datas[i]
        });
    }
    


    // 2 定义配置项
    var option = {
        backgroundColor: 'white',
        grid: {
            top: '20%',
            left: '5%',
            right: '5%',
            bottom: '8%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            borderWidth: 1,
            axisPointer: {
                type: 'shadow'
            },
            extraCssText: 'z-index:2',
        },
        legend: [{
            top: 'top',
            left: 'center',
            orient: 'horizontal',
            data: names,
            itemWidth: 15,
            itemHeight: 10,
            itemGap: 15,
            borderRadius: 4,
            textStyle: {
                color: '#000',
                fontFamily: 'Alibaba PuHuiTi',
                fontSize: 14,
                fontWeight: 400
            }
        }],
        xAxis: {
            type: 'category',
            data: datax,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#393939' //X轴文字颜色
                }
            }
        },
        yAxis: [

            {
                type: 'value',
                name: '',
                nameTextStyle: {
                    color: '#000',
                    fontFamily: 'Alibaba PuHuiTi',
                    fontSize: 14,
                    fontWeight: 600
                    // padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
                },
                nameGap: 30,  // 表现为上下位置
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#eeeeee'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#393939',
                    fontSize: 14
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#eeeeee'
                    }
                }

            }

        ],
        series: seriesData
    }
    // 3 更新配置
    echart.setOption(option);

}

function generateRandomColors(num) {
    let randomColors = [];
    let characters = '0123456789ABCDEF';
    
    for (let i = 0; i < num; i++) {
        let color = '#';
        for (let j = 0; j < 6; j++) {
            color += characters[Math.floor(Math.random() * 16)];
        }
        randomColors.push(color);
    }
    
    return randomColors;
}